<template>
  <div class="app-container">
    <header>
      <div class="header">
        <div class="reportHeader">
          <h2>校验报告详情</h2>
        </div>
      </div>
    </header>
    <main>
      <div v-if="tableData.tableResult" class="tableBox">
        <div class="top">
          <div class="top_left">
            <Echarts
              id="verificationReport"
              width="300px"
              height="300px"
              :options="option"
            />
          </div>
          <div class="top_right">
            <p>
              总数量：<span>{{ tableData.allSize }}</span>
            </p>
            <p>
              成功数量：<span>{{ tableData.successCount }}</span>
            </p>
            <p>
              失败数量：<span>{{ tableData.failCount }}</span>
            </p>
            <p>
              兼容性：<span>{{ tableData.successPercent }}</span>
            </p>
            <p>
              总耗时：<span>{{ tableData.allTimeConsuming }}</span>
            </p>
          </div>
        </div>
      </div>
    </main>
    <el-dialog title="校验结果" :visible.sync="resultOpen" width="1200px">
      <div class="total">
        <div class="total_top">
          <p>
            对比状态：<el-tag
              v-if="childTableData.isSuccess"
              type="success"
            >完成</el-tag><el-tag v-else type="danger">失败</el-tag>
          </p>
          <p>
            耗时：<span>{{ childTableData.timeConsuming }}</span>
          </p>
        </div>
        <el-divider />
        <div class="total_detail">
          <div class="left_source">
            <p style="margin-top: 0">
              源表名称：<span>{{ childTableData.sourceName }}</span>
            </p>
            <p style="margin-top: 0">
              源表行数量：<span>{{ childTableData.sourceRowCount }}</span>
            </p>
            <p style="margin-top: 0">
              源表列数量：<span>{{ childTableData.sourceColumnCount }}</span>
            </p>
            <p>错误原因：{{ childTableData.verifyErrorMsg }}</p>
          </div>
          <div class="right_sink">
            <p style="margin-top: 0">
              目标表名称：<span>{{ childTableData.sinkName }}</span>
            </p>
            <p style="margin-top: 0">
              目标表行数量：<span>{{ childTableData.sinkRowCount }}</span>
            </p>
            <p style="margin-top: 0">
              目标表列数量：<span>{{ childTableData.sinkColumnCount }}</span>
            </p>
          </div>
        </div>
      </div>
      <el-table
        v-if="childTableData.rowResult"
        border
        height="200px"
        :data="childTableData.rowResult.cols"
        style="width: 100%"
      >
        <el-table-column prop="sourceColName" label="源表名称" align="center" />
        <el-table-column prop="sourceColSize" label="源表大小" align="center" />
        <el-table-column prop="sourceColType" label="源表类型" align="center" />
        <el-table-column prop="sinkColName" label="目标表名称" align="center" />
        <el-table-column prop="sinkColSize" label="目标表大小" align="center" />
        <el-table-column prop="sinkColType" label="目标表类型" align="center" />
        <el-table-column prop="status" label="状态" align="center" />
        <el-table-column prop="sourceComment" label="源表注释" align="center" />
        <el-table-column
          prop="dataEqual"
          label="数据对比结果"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.dataEqual" type="success">成功</el-tag>
            <el-tag v-else type="danger">失败</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="resultOpen = false">确 定</el-button>
      </div>
    </el-dialog>
    <template v-for="(item, index) in tableBlocks">
      <TableBlock
        v-if="tableData[item.key]"
        :key="item.key + index"
        :title="item.label"
        :echarts-id="item.key"
        :table-list="tableData[item.key]"
      />
    </template>
  </div>
</template>

<script>
import Echarts from '@/components/Echarts'
import { dataTaskLogGetInfo } from '@/api/console/tasks.js'
import TableBlock from './tableBlock.vue'
export default {
  components: { Echarts, TableBlock },
  data() {
    return {
      activeIndex: '1',
      tableData: {},
      allData: null,
      tableBlocks: [
        { label: '表评估结果', key: 'tableResult' },
        { label: '视图评估结果', key: 'viewResult' },
        { label: '触发器评估结果', key: 'triggerResult' },
        { label: '存储过程评估结果', key: 'procedureResult' },
        { label: '索引评估结果', key: 'indexResult' },
        { label: '序列评估结果', key: 'seqResult' },
        { label: '同义词评估结果', key: 'synonymResult' },
        { label: '函数评估结果', key: 'functionResult' },
        { label: '类型评估结果', key: 'typeResult' }
      ],
      option: {
        title: {
          text: '',
          left: 'center',
          top: '45%',
          textStyle: {
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '校验百分比',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 90, name: '兼容', itemStyle: { color: '#91CC75' }},
              { value: 10, name: '不兼容', itemStyle: { color: '#FF7070' }}
            ]
          }
        ]
      },
      resultOpen: false,
      childTableData: {}
    }
  },
  created() {},
  async mounted() {
    const res = await dataTaskLogGetInfo({
      id: this.$route.query.id
    })
    this.tableData = JSON.parse(res.data.taskResult).data
    this.option.title.text = `成功${this.tableData.successPercent}`
    this.option.series[0].data[0].value =
      this.tableData.successPercent.split('%')[0]
    this.option.series[0].data[0].name = `成功${
      this.tableData.successPercent.split('%')[0]
    }%`
    this.option.series[0].data[1].value =
      this.tableData.failPercent.split('%')[0]
    this.option.series[0].data[1].name = `失败${
      this.tableData.failPercent.split('%')[0]
    }%`
  },
  methods: {
    handleDetail(row) {
      this.childTableData = row
      this.childTableData.verifyErrorMsg =
        typeof this.childTableData.verifyErrorMsg === 'string'
          ? this.childTableData.verifyErrorMsg
          : this.childTableData.verifyErrorMsg.join(',')
      this.resultOpen = true
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 0;
  // height: 100%;

  header {
    .reportHeader {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px;
      background-color: #347dfe;
      color: #fff;
      height: 70px;
      h2 {
        margin: 10px 0;
      }
    }
  }

  main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .tableBox {
      width: 97%;
      margin: 30px auto;
      box-shadow: 0px 0px 10px 3px #eee;
      .top {
        display: flex;
        width: 100%;

        .top_left,
        .top_right {
          width: 50%;
        }

        .top_left {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .top_right {
          p {
            font-weight: 600;
          }
          span {
            font-weight: 500;
          }
        }
      }

      .buttom {
        padding: 10px 20px;
      }
    }
  }
}

.total {
  margin-bottom: 10px;
  .total_top {
    display: flex;

    p {
      padding: 0 5px;
      margin: 0;
    }
  }

  p {
    font-weight: 600;

    span {
      font-weight: 500;
    }
  }

  .total_detail {
    display: flex;
    padding: 0 5px;
  }

  .left_source,
  .right_sink {
    width: 50%;
  }
}

::v-deep .el-divider--horizontal {
  margin: 18px 0;
}
</style>
